
<div class="fluent-messagebar intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-5ykbiib3u4="">
  <div class="fluent-messagebar-icon" b-5ykbiib3u4="">
    <svg style="width: 20px; fill: var(--info);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="3">
      <title>info</title>
      <path d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0ZM9.5 8.91a.5.5 0 0 1 1 0V13.6a.5.5 0 0 1-1 0V8.9Zm-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"></path>
    </svg>
  </div>
  <div class="fluent-messagebar-message" b-5ykbiib3u4="">
    <span class="title" b-5ykbiib3u4="">This is a message</span>
  </div>
  <div class="fluent-messagebar-container-action" b-5ykbiib3u4="">
    <svg class="fluent-messagebar-close" style="width: 16px; fill: var(--neutral-foreground-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onclick="4">
      <path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
    </svg>
  </div>
</div>